Hooks::run( 'PreferencesGetLegend', array( $this, $key, &$legend ) );
return $legend;
}
+
+ /**
+ * Get the keys of each top level preference section.
+ * @return array of section keys
+ */
+ function getPreferenceSections() {
+ return array_keys( array_filter( $this->mFieldTree, 'is_array' ) );
+ }
}
}
$out->addModules( 'mediawiki.special.preferences' );
+ $out->addModuleStyles( 'mediawiki.special.preferences.styles' );
if ( $this->getRequest()->getCheck( 'success' ) ) {
$out->wrapWikiMsg(
$htmlForm = Preferences::getFormObject( $this->getUser(), $this->getContext() );
$htmlForm->setSubmitCallback( array( 'Preferences', 'tryUISubmit' ) );
+ $sectionTitles = $htmlForm->getPreferenceSections();
+
+ $prefTabs = '';
+ foreach ( $sectionTitles as $key ) {
+ $prefTabs .= Html::rawElement( 'li',
+ array(
+ 'role' => 'presentation',
+ 'class' => ( $key === 'personal' ) ? 'selected' : null
+ ),
+ Html::rawElement( 'a',
+ array(
+ 'id' => 'preftab-' . $key,
+ 'role' => 'tab',
+ 'href' => '#mw-prefsection-' . $key,
+ 'aria-controls' => 'mw-prefsection-' . $key,
+ 'aria-selected' => ( $key === 'personal' ) ? 'true' : 'false',
+ 'tabIndex' => ( $key === 'personal' ) ? 0 : -1,
+ ),
+ $htmlForm->getLegend( $key )
+ )
+ );
+ }
+ $out->addHTML(
+ Html::rawElement( 'ul',
+ array(
+ 'id' => 'preftoc',
+ 'role' => 'tablist'
+ ),
+ $prefTabs )
+ );
$htmlForm->show();
}
),
'mediawiki.special.preferences' => array(
'scripts' => 'resources/src/mediawiki.special/mediawiki.special.preferences.js',
- 'styles' => 'resources/src/mediawiki.special/mediawiki.special.preferences.css',
'position' => 'top',
'messages' => array(
'prefs-tabs-navigation-hint',
'mediawiki.notification',
),
),
+ 'mediawiki.special.preferences.styles' => array(
+ 'styles' => 'resources/src/mediawiki.special/mediawiki.special.preferences.styles.css',
+ 'position' => 'top',
+ ),
'mediawiki.special.recentchanges' => array(
'scripts' => 'resources/src/mediawiki.special/mediawiki.special.recentchanges.js',
'dependencies' => 'mediawiki.special',
+++ /dev/null
-/* Reuses colors from mediawiki.special.changeemail.css */
-.mw-email-not-authenticated .mw-input,
-.mw-email-none .mw-input{
- border: 1px solid #FF8080;
- background-color: #FFC0C0;
- color: black;
-}
-/* Authenticated email field has its own class too. Unstyled by default */
-/*
-.mw-email-authenticated .mw-input { }
-*/
-
-/*
- * Hide, but keep accessible for screen-readers.
- * Like .mw-jump, #jump-to-nav from shared.css
- */
-.mw-navigation-hint {
- overflow: hidden;
- height: 0;
- zoom: 1;
-}
-
-/* When JS is enabled, .mw-preferences-messageboxes are replaced with mw.notifications */
-.mw-preferences-messagebox {
- display: none;
-}
-
-.prefsection td.mw-label {
- width: 20%;
-}
-
-.prefsection table {
- width: 100%;
-}
-
-.prefsection table.mw-htmlform-matrix {
- width: auto;
-}
*/
( function ( mw, $ ) {
$( function () {
- var $preftoc, $preferences, $fieldsets, $legends,
+ var $preftoc, $preferences, $fieldsets,
hash, labelFunc,
$tzSelect, $tzTextbox, $localtimeHolder, servertime,
allowCloseWindow, notif;
};
$( '#prefsubmit' ).attr( 'id', 'prefcontrol' );
- $preftoc = $( '<ul>' )
- .attr( {
- id: 'preftoc',
- role: 'tablist'
- } );
- $preferences = $( '#preferences' )
- .addClass( 'jsprefs' )
- .before( $preftoc );
+ $preftoc = $( '#preftoc' );
+ $preferences = $( '#preferences' );
+
$fieldsets = $preferences.children( 'fieldset' )
- .hide()
.attr( {
role: 'tabpanel',
- 'aria-hidden': 'true',
'aria-labelledby': labelFunc
} )
- .addClass( 'prefsection' );
- $legends = $fieldsets
- .children( 'legend' )
- .addClass( 'mainLegend' );
+ .not( '#mw-prefsection-personal' )
+ .hide()
+ .attr( 'aria-hidden', 'true' );
+
+ // T115692: The following is kept for backwards compatibility with older skins
+ $preferences.addClass( 'jsprefs' );
+ $fieldsets.addClass( 'prefsection' );
+ $fieldsets.children( 'legend' ).addClass( 'mainLegend' );
// Make sure the accessibility tip is selectable so that screen reader users take notice,
// but hide it per default to reduce interface clutter. Also make sure it becomes visible
}
}
- // Populate the prefToc
- $legends.each( function ( i, legend ) {
- var $legend = $( legend ),
- ident, $li, $a;
- if ( i === 0 ) {
- $legend.parent().show();
- }
- ident = $legend.parent().attr( 'id' );
-
- $li = $( '<li>' )
- .attr( 'role', 'presentation' )
- .addClass( i === 0 ? 'selected' : '' );
- $a = $( '<a>' )
- .attr( {
- id: ident.replace( 'mw-prefsection', 'preftab' ),
- href: '#' + ident,
- role: 'tab',
- tabIndex: i === 0 ? 0 : -1,
- 'aria-selected': i === 0 ? 'true' : 'false',
- 'aria-controls': ident
- } )
- .text( $legend.text() );
- $li.append( $a );
- $preftoc.append( $li );
- } );
-
// Disable the button to save preferences unless preferences have changed
$( '#prefcontrol' ).prop( 'disabled', true );
- $( '.prefsection' ).one( 'change keydown mousedown', function () {
+ $( '#preferences > fieldset' ).one( 'change keydown mousedown', function () {
$( '#prefcontrol' ).prop( 'disabled', false );
} );
--- /dev/null
+/* Reuses colors from mediawiki.special.changeemail.css */
+.mw-email-not-authenticated .mw-input,
+.mw-email-none .mw-input{
+ border: 1px solid #FF8080;
+ background-color: #FFC0C0;
+ color: black;
+}
+/* Authenticated email field has its own class too. Unstyled by default */
+/*
+.mw-email-authenticated .mw-input { }
+*/
+/* This breaks due to nolabel styling */
+#preferences > fieldset td.mw-label {
+ width: 20%;
+}
+
+#preferences > fieldset table {
+ width: 100%;
+}
+#preferences > fieldset table.mw-htmlform-matrix {
+ width: auto;
+}
+
+/* The CSS below is also for JS enabled version, because we want to prevent FOUC */
+
+/*
+ * Hide, but keep accessible for screen-readers.
+ * Like .mw-jump, #jump-to-nav from shared.css
+ */
+.client-js .mw-navigation-hint {
+ overflow: hidden;
+ height: 0;
+ zoom: 1;
+}
+
+.client-nojs #preftoc {
+ display: none;
+}
+
+.client-js #preferences > fieldset {
+ display: none;
+}
+
+/* Only the 1st tab is shown by default in JS mode */
+.client-js #preferences #mw-prefsection-personal {
+ display: block;
+}
+
/* HTMLForm styles */
table.mw-htmlform-nolabel td.mw-label {
- width: 1px;
+ width: 1px !important;
}
.mw-htmlform-invalid-input td.mw-input input {